<!--
 * @Author: lailifang
 * @Date: 2022-03-15 15:44:31
 * @Description: 预警情况
-->
<template>
  <div class="top">
    <ul>
      <li
        v-for="(item, index) of topList.data"
        :key="item.id"
        @click="warnClick(item.id, index)"
      >
        <div :class="['li-con', { 'li-change': index === topList.order }]">
          <img :src="bgImage(index)" />
          <div class="cont">
            <p :class="`title${index}`">{{ item.name }}</p>
            <span class="num">{{ item.value }} <i>条</i></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import httpRequest from '@/service'
export default defineComponent({
  name: 'M4',
  components: {},
  props: {
    adcode: {
      type: String,
      default: ''
    },
    timeValue: {
      type: Array,
      default: () => {
        return []
      }
    },
    classId: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const store = useStore()
    interface IData {
      [key: string]: any
      order: number
    }
    const topList = reactive<IData>({
      data: [],
      order: 0
    })
    const topListApi = () => {
      httpRequest
        .get({
          url: 'M4WarningSituat',
          params: {
            adcode: props.adcode,
            // startTime: props.timeValue[0],
            // endTime: props.timeValue[1],
            startTime: store.state.globalDate.startDate,
            endTime: store.state.globalDate.endDate,
            classId: props.classId
          }
        })
        .then((res) => {
          topList.data = res.data
          warnClick(res.data[topList.order].id)
        })
        .catch(() => {
          console.log('请求失败')
        })
    }
    const bgImage = (e: any) => {
      return require(`../../../assets/images/M4/icons${e}.png`)
    }
    const warnClick = (id: string, index?: number) => {
      if (index === 0 || index) {
        topList.order = index
      }
      context.emit('change', id)
    }
    const refreshData = () => {
      topListApi()
    }
    watch(
      () => [props.adcode, props.timeValue, props.classId],
      () => {
        topListApi()
      }
    )
    return { topList, bgImage, warnClick, refreshData }
  }
})
</script>
<style lang="less" scoped>
.top {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 10px;
  height: 124px;
  ul {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 448px;
      // height: 152px;
      height: 124px;
      background: url('../../../assets/images/M4/yjyb-bg.png') no-repeat center;
      background-size: 100% 100%;
      padding: 5px 2px 5px 3px;
      cursor: pointer;
      .li-con {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 80px;
      }
      .cont {
        font-size: 26px;
        p {
          font-weight: bold;
          font-family: 'Benmo';
        }
        .title0 {
          color: #00e4ff;
        }
        .title1 {
          color: #ff454b;
        }
        .title2 {
          // color: #ffe944;
          color: #ff8814;
        }
        .title3 {
          // color: #ffe944;
          // color: #4aff47;
          color: #ffe944;
        }
        .num {
          font-family: 'AliHYAiHei';
          color: #30ccff;
          i {
            font-style: normal;
          }
        }
      }
    }
  }
  .li-change {
    border-radius: 3px;
    background-color: rgba(0, 91, 144, 0.6);
  }
}
</style>
